<template>
  <div>
    <!-- 这个样式解决一个未知原因出现滑动条的问题 待解决 -->
    <div :class="spr" style="overflow: hidden;" :key="spr">
      <div class="swiper-wrapper">
          <slot></slot>
      </div>
      <!-- 这里改用动态的分页器是由于引入多个swiper会导致分页器数量异常 -->
      <div v-if="el === 'swiper-pagination'" :class='el'></div>
      <!--  前后按钮
        <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    </div>
  </div>
</template>

<script>
// 导入swiper所有相关组件，不加bundle时只加载核心组件
// 导入失败  安装低版本的Swiper：cnpm install swiper@6.8.1 --savenpm install swiper@6.8.1 --save
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

// import 'swiper/swiper-bundle'
export default {
  props: {
    spr:{
      type: String,
      default: 'swiper'
    },
    // 是否添加分页器
    el:{
      type: String,
      default: 'swiper-pagination'
    },
    // 是否循环
    loop: {
      type: Boolean,
      default: false
    },
    // 往new swiper中添加新属性
    free:{
      type: Object,
      default :()=>{
        return{
           slidesPerView: 1,
          spaceBetween: 0,
          freeMode: false,
        }
        
      }
    }
  },
  mounted () {
     console.log('swiper开始工作:'+this.spr+this.pagination);
     var mySwiper = new Swiper('.'+this.spr, {
        // direction: 'vertical', // 垂直切换选项
        loop: this.loop, // 循环模式选项
        // 下面三行是 依次显示a个，每b秒，，，。忘了
        slidesPerView: this.free.slidesPerView,
        spaceBetween: this.free.spaceBetween,
        freeMode: this.free.freeMode,
        // 如果需要分页器
        pagination: {
          el: '.'+this.el
        }
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
      })
  },
  methods:{
      
  }
}

</script>

<style scoped>
/* 覆盖按钮的原本样式 */
  .swiper-pagination {
    position: revert;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
  }
</style>
